<template>
	<view class="group-1">
		<view class="header-1">
			<text class="info">合计：{{list.length}}个集装箱，共计{{getContainerCarNums}}台车</text>
		</view>
		<view class="body-1" v-for="(item,index) in list" :key="index">
			<view class="container-4">
				<view class="wrapper-4">
					<view class="group-4">
						<image :src="require('@/static/img/img_12.png')" class="icon-circle-1" />
						<image :src="require('@/static/img/img_13.png')" class="icon-list-1" />
					</view>
					<text class="word-3">集装箱号：{{item.no}}</text>
				</view>
				<view class="grid-1">
					<view class="col-item-0-1">
						<text class="word-4">集装箱尺寸</text>
						<text class="label-5">{{item.size}}</text>
					</view>
					<view class="col-item-1-1">
						<text class="word-3">集装箱重量</text>
						<text class="label-6">{{item.weight}}</text>
					</view>
					<view class="col-item-2-1">
						<view class="tag-4">装箱照片</view>
						<view class="word-6" v-for="(d,j) in item.packingPicList" :key="j" @click="openFile(d)">查看
						</view>
					</view>
				</view>
				<!--  -->
				<view class="time-wrapper" v-for="(d,j) in item.carInfoList" :key="j">
					<text class="time">{{d}}</text>
				</view>
				<view class="horizontal-line-1" />
				<view class="wrapper-5">
					<u-collapse>
						<u-collapse-item :open="false">
							<template slot="title" class="tag-5">
								车架号
							</template>
							<view class="group-6">
								<view class="lsggaeey-wrapper" v-for="(d,j) in item.vinList" :key="j">
									<text class="lsggaeey">{{d}}</text>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		openFile
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			getContainerCarNums() {
				const number = (this.list || [])
					.map((x) => {
						return (x.vinList || []).length;
					})
					.reduce((x, y) => {
						return x + y;
					}, 0);
				return number;
			}

		},
		onLoad(options) {
			this.getById(options)
		},
		methods: {
			async getById(options) {
				uni.showLoading({
					title: '加载中...'
				});
				const res = await this.$api.getOrderById({
					id: options.id
				})
				const item = res.result.orderDeliveryList.find(x => {
					return x.id === options.shipmentId
				})
				console.log(item.transportContainerList);
				this.list = item.transportContainerList || []
				uni.hideLoading();
			},
			openFile
		},

	}
</script>
<style>
	page {
		background-color: rgba(247, 247, 247, 1);
	}
</style>
<style scoped lang="css">
	.group-1 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
		width: 375px;
		padding-bottom: 120px;

		border-radius: 0px;
	}

	.header-1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-self: center;
		width: 375px;
		padding: 8px 12px;
		background-color: rgba(247, 247, 247, 1);
		border-radius: 0px;
	}

	.info {
		align-self: flex-start;
		overflow: hidden;
		max-width: 345px;
		margin-left: 3px;
		font-family: PingFangSC-Regular;
		font-size: 13px;
		font-weight: 400;
		line-height: 18px;
		color: rgba(150, 150, 150, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.body-1 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
		width: 375px;
		padding: 0 12px;

	}

	.container-4 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
		width: 345px;
		margin-top: 10px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 8px;
		background: #fff;
		padding-top: 13px;
		padding-bottom: 7px;
	}

	.wrapper-4 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-self: center;
		width: 315px;
	}

	.group-4 {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-self: center;
		height: 20px;
		padding: 2px 0;
	}

	.icon-circle-1 {
		align-self: flex-start;
		width: 16px;
		height: 16px;
	}

	.icon-list-1 {
		position: absolute;
		left: 50%;
		top: 6px;
		width: 10px;
		height: 8px;
		transform: translateX(-50%);
	}

	.word-3 {
		align-self: center;
		margin-left: 10px;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: rgba(32, 32, 32, 1);
		white-space: nowrap;
	}

	.grid-1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-self: center;
		width: 315px;
		margin-top: 10px;
	}

	.col-item-0-1 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100px;
		margin-left: 1px;
	}

	.word-4 {
		align-self: center;
		overflow: hidden;
		max-width: 100px;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		color: rgba(136, 138, 142, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.label-5 {
		align-self: flex-start;
		overflow: hidden;
		max-width: 60px;
		margin: 5px 0 0 20px;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
		color: rgba(32, 32, 32, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.col-item-1-1 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100px;
		margin-left: 10px;
	}



	.label-6 {
		align-self: flex-start;
		overflow: hidden;
		max-width: 60px;
		margin: 5px 0 0 20px;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
		color: rgba(32, 32, 32, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.col-item-2-1 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100px;
		padding-bottom: 2px;
		margin-left: 4px;
	}

	.tag-4 {
		align-self: center;
		overflow: hidden;
		max-width: 100px;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		color: rgba(136, 138, 142, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.word-6 {
		align-self: flex-start;
		overflow: hidden;
		max-width: 48px;
		margin: 8px 0 0 26px;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		color: rgba(15, 189, 127, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.time-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-self: flex-start;
		width: 294px;
		padding: 9px 12px;
		margin: 12px 0 0 24px;
		background-color: rgba(15, 189, 127, 0.07);
		border-radius: 8px;
	}

	.time {
		align-self: flex-start;
		overflow: hidden;
		max-width: 270px;
		font-family: PingFangSC-Regular;
		font-size: 13px;
		font-weight: 400;
		line-height: 18px;
		color: rgba(15, 189, 127, 1);
		letter-spacing: 0.5909091px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.horizontal-line-1 {
		align-self: flex-start;
		width: 294px;
		height: 1px;
		margin: 12px 0 0 24px;
		background-color: rgba(242, 242, 242, 1);
		border-radius: 0px;
	}

	.wrapper-5 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
		width: 315px;
	}


	.group-5 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-self: center;
		width: 313px;
	}

	.tag-5 {
		align-self: center;
		margin-left: 20px;
		font-family: PingFangSC-Regular;
		font-size: 13px;
		font-weight: 400;
		line-height: 18px;
		color: rgba(32, 32, 32, 1);
		white-space: nowrap;
	}

	.view {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-self: center;
		width: 37px;
		height: 18px;
	}

	.tag-6 {
		align-self: center;
		font-family: PingFangSC-Regular;
		font-size: 13px;
		font-weight: 400;
		line-height: 18px;
		color: rgba(135, 136, 141, 1);
		white-space: nowrap;
	}

	.icon-up {
		align-self: center;
		width: 10px;
		height: 6px;
	}

	.group-6 {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-self: center;
		margin-left: 20px;
		width: 313px;
	}

	.lsggaeey-wrapper {

		padding: 3px 8px 8px 5px;
		background-color: rgba(15, 189, 127, 0.07);
		border-radius: 3px;
		margin-top: 5px;
		margin-right: 5px;
	}

	.lsggaeey {
		align-self: flex-start;
		overflow: hidden;
		max-width: 115px;
		font-family: ArialMT;
		font-size: 11px;
		font-weight: 400;
		line-height: 16px;
		color: rgba(15, 189, 127, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}



	.lsggaeey-wrapper-2 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-self: center;
		width: 131px;
		padding: 5px 8px 1px;
		margin-left: 20px;
		background-color: rgba(15, 189, 127, 0.07);
		border-radius: 3px;
	}

	.lsggaeey-2 {
		align-self: flex-start;
		overflow: hidden;
		max-width: 115px;
		font-family: ArialMT;
		font-size: 11px;
		font-weight: 400;
		line-height: 16px;
		color: rgba(15, 189, 127, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.lsggaeey-wrapper-3 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-self: center;
		width: 131px;
		padding: 5px 8px 1px;
		margin-left: 5px;
		background-color: rgba(15, 189, 127, 0.07);
		border-radius: 3px;
	}

	.lsggaeey-3 {
		align-self: flex-start;
		overflow: hidden;
		max-width: 115px;
		font-family: ArialMT;
		font-size: 11px;
		font-weight: 400;
		line-height: 16px;
		color: rgba(15, 189, 127, 1);
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>